<template>
	<div class="nav">
		<ul>
			<li v-for="i in nav" :key="i.id">
				<router-link to="Pro_list">
					<img :src="i.img_src"/>
					<span v-text="i.test"></span>	
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		data(){
			return {
				nav:[]
			}
		},
		mounted(){
			const that = this;
			axios.get("/api/index.json").
			then(res => {
				that.nav = res.data.data.nav;
			})
		}
	}
</script>

<style lang="stylus" scoped>
	.nav
		width: 2.42rem;
		background: #5fa5e9;
		overflow: hidden;
		margin-left: 0.22rem;
		float: left;
		li
			padding: 0.26rem 0;
			width: 2.18rem;
			border-bottom: 0.01rem solid #fff;
			margin: 0 auto;
			img
				width: 0.42rem;
				height: 0.36rem;
				margin-left: 0.2rem;
			span
				font-size: 0.24rem;
				color: #fff;
				margin-left: 0.1rem;
		li:first-child
			span
				font-size: 0.28rem !important;
		li:last-child
			border: none;
</style>